import React, { useEffect, useState, useReducer } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { Form, Col, Input, Row, Button, Select, Divider, Table } from "antd";
import { LeftOutlined, AlignLeftOutlined } from "@ant-design/icons";
import axios from "axios";
import CancelModel from "../../../common/CancelModel";
import AdjustShow from "../Adjust/AdjustShow";
import "./index.css";

const initialState = {
  orderData: {},
};
const reducer = (state, action) => {
  console.log("模态框传入", action.orderData);
  switch (action.type) {
    case "changeOrderData":
      return {
        ...state,
        orderData: action.orderData,
      };
    default:
  }
};

export default function PoiManageList() {
  /**
   * 设置选择门店模态框
   */

  let navigation = useNavigate();
  let location = useLocation();
  const { state } = location;

  const [form] = Form.useForm();
  const [data, setData] = useState({});
  const [store, dispatch] = useReducer(reducer, initialState);

  /**
   * 根据订单id 查询详细
   * @returns
   */
  function queryOrderById() {
    axios({
      headers: {
        tenantId: 500,
        userId: 11111,
      },
      method: "get",
      url: `http://localhost:9103/order/catering/${state.id}`,
    }).then((data) => {
      setData(data.data);
    });
  }
  /**
   * 制作
   */
  function make(values) {
    axios({
      headers: {
        tenantId: 500,
        userId: 11111,
      },
      method: "post",
      url: `http://localhost:9103/order/catering/${state.id}/prepare`,
      data: {
        ...values,
      },
    }).then((data) => {
      setData(data.data);
    });
  }

  useEffect(() => {
    queryOrderById();
  }, [state.id]);

  function makeSubmit() {
    const items = data.items.filter((item) => {
      /**
       * 状态为制作中的提取出来
       */
      if (item.status === "PREPARING") {
        return item;
      }
    });
    const nowitems = items.map((item) => {
      return {
        seqNo: item.seqNo,
        version: item.version,
      };
    });

    const request = {
      version: data.version,
      items: nowitems,
    };
    console.log("制作json", request);
    console.log("data", data);
    make(request);
  }

  function adj() {
    if (data.id) {
      return <AdjustShow data={data} dispatch={dispatch} />;
    }
  }

  const getFields = () => {
    return (
      <React.Fragment>
        <Col span={24}>
          <div className="headAddShop">
            <Row>
              <Col span={8}>
                <LeftOutlined
                  style={{
                    fontSize: 30,
                    paddingLeft: 10,
                    paddingTop: 10,
                    paddingBottom: 10,
                  }}
                />
              </Col>
              <Col
                span={8}
                style={{ paddingLeft: 100, paddingTop: 10, paddingBottom: 10 }}
              >
                <span style={{ center: 30, fontSize: 20 }}>
                  加退菜：{state.id}
                </span>
              </Col>

              <Col
                span={8}
                style={{
                  paddingTop: 10,
                  paddingBottom: 10,
                  paddingRight: 10,
                  paddingLeft: 160,
                }}
              >
                <AlignLeftOutlined />
              </Col>
            </Row>
          </div>
        </Col>

        {/** 基本信息 */}
        <Col span={24}>
          <div className="headlineClass">基本信息</div>
        </Col>

        <Col span={24}>
          <Row>
            <Col span={12}>
              <Form.Item>
                <Row className="divfix">
                  <Col span={8} className="leftCommDiv">
                    门店
                  </Col>
                  <Col span={16}>
                    <span>{state.shopSnapshotOnPlace.name}</span>
                  </Col>
                </Row>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="tableNo">
                <Row className="divfix">
                  <Col span={8} className="leftCommDiv">
                    座位号
                  </Col>
                  <Col span={16}>
                    <span>{state.tableNo}</span>
                  </Col>
                </Row>
              </Form.Item>
            </Col>
          </Row>
        </Col>

        <Col span={24}>
          <Row>
            <Col span={12}>
              <Row className="divfix">
                <Col span={8} className="leftCommDiv">
                  用餐人数
                </Col>
                <Col span={16}>
                  <Form.Item name="customerCount">
                    <span>{state.customerCount}</span>
                  </Form.Item>
                </Col>
              </Row>
            </Col>
            <Col span={12}>
              <Row className="divfix">
                <Col span={8} className="leftCommDiv">
                  备注
                </Col>
                <Col span={16}>
                  <Form.Item name="comment">
                    <span>{state.comment}</span>
                  </Form.Item>
                </Col>
              </Row>
            </Col>
          </Row>
        </Col>
        {/** 菜品信息 */}
        <Col span={24}>
          <div className="headlineClass">菜品信息</div>
        </Col>

        {adj()}

        <Divider />
      </React.Fragment>
    );
  };

  const onFinish = (values) => {
    console.log("表单提交的数据", values);
  };

  return (
    <div>
      <Form
        form={form}
        name="advanced_search"
        className="ant-advanced-search-form"
        onFinish={onFinish}
        initialValues={{
          shopName: state.name,
        }}
      >
        <Row gutter={24}>{getFields()}</Row>

        <Row>
          <Col span={24} style={{ textAlign: "right" }}>
            <Button
              onClick={() => {
                makeSubmit();
              }}
              className="ant-btn-color"
              style={{
                paddingLeft: 50,
                paddingRight: 50,
                background: "rgb(247, 211, 9)",
              }}
            >
              确认
            </Button>

            <Button
              style={{
                margin: "0 8px",
                paddingLeft: 50,
                paddingRight: 50,
                background: "rgb(236, 235, 235)",
              }}
              onClick={() => {
                dispatch({ type: "changeCancelModel", status: true });
              }}
            >
              取消
            </Button>
          </Col>
        </Row>
      </Form>
    </div>
  );
}
